<template>
  <div id="order">
    <div class="order-list">
      <!-- 顶部提示 -->
      <a href class="ord-message">
        <span>还有未评价的订单哦，点击去评价</span>
        <i></i>
      </a>
      <!-- 物品内容 -->
      <div class="goods">
        <ul>
          <li class="li1">
            <div class="adress1">
              <h2>
                <span class="sp1">华润苏果-瞻园路店</span>
                <i></i>
                <span class="sp2">已完成</span>
              </h2>
              <p class="time">今天 11:35</p>
              <div class="list-goods">
                <div class="goods-box">
                  <div class="pic">
                    <img src="../image/order/gd1.jpg" alt>
                  </div>
                </div>
                <div class="order-price">
                  <span class="s1">¥19</span>
                  <span class="s2">共1件</span>
                  <span class="s3">
                    <span>达达专送</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="evaluation">
              <div class="evaluation-btn">
                <a href>去评价</a>
                <a href>再次购买</a>
              </div>
            </div>
          </li>
          <li class="show-message">已显示全部</li>
        </ul>
      </div>
    </div>
    <appfooter active='order'></appfooter>
  </div>
</template>
<script>
export default {};
</script>
<style lang='scss' scoped>
* {
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  font-style: normal;
}
a {
  text-decoration: none;
}
li {
  list-style-type: none;
}

#order {
    background:#eee;
    height: 1300px;
  .order-list {
    width: 750px;
    position: relative;
    
    .ord-message {
      span {
        color: #ee7a12;
        font-size: 22px;
        display: block;
        text-align: center;
        height: 60px;
        line-height: 60px;
        background: #fbf9e4;
        border-bottom: 1px solid #ccc;
      }
      i {
        display: block;
        width: 54px;
        height: 54px;
        background: url(../image/order/order_status_map_icon_v46.png) -202px -198px
          no-repeat;
        background-size: 934px 303px;
        position: absolute;
        top: 0px;
        right: 0px;
      }
    }
    //购买的商品订单
    .goods {
      ul {
        .li1 {
          padding: 0px 20px 30px;
          margin-bottom: 20px;
          height:350px;
          color: #333;
           background-color:#fff;
          .adress1 {
            h2 {
              font-size: 30px;
              height: 68px;
              line-height: 68px;
              .sp1 {
                font-weight: bold;
              }
              i {
                display: inline-block;
                width: 22px;
                height: 25px;
                background: #fff;
                background: url(../image/order/order_status_map_icon_v46.png) no-repeat;
                background-position: -153px -70px;
                background-size:934px 303px;
              }
              .sp2 {
                width: 184px;
                text-align: right;
                font-size: 26px;
                color: #333333;
                float: right;
              }
            }
            .time {
              line-height: 2;
              color: #999;
            }
            .list-goods {
              margin-top: 20px;
              display: flex;
              justify-content: space-between;
              .goods-box {
                width: 100px;
                height: 100px;
                display: flex;
                .pic {
                  margin: 0px 0px 10px 10px;
                  img {
                    width: 100px;
                    height: 100px;
                  }
                }
              }
              .order-price {
                width: 130px;
                .s1 {
                  font-size: 30px;
                  color: #ff5757;
                  height: 38px;
                  padding-left: 30px;
                  float: right;
                  text-align: right;
                }
                .s2 {
                  font-size: 26px;
                  color: #666;
                  padding-bottom: 6px;
                  float: right;
                }
                .s3 {
                  line-height: 22px;
                  border: 1px solid #16a9ff;
                  padding: 0px 6px;
                  font-size: 20px;
                  height: 28px;
                  border-radius: 8px 2px;
                  float: right;
                  span{
                      color:#16a9ff;
                  }
                }
              }
            }
          }
          .evaluation{
              padding-top:30px;
               position: relative;
              .evaluation-btn{
                  position: absolute;
                   right:0px;
                   color:#333;
                  a{font-size:30px;
                   display:inline-block;
                   margin-left:10px;
                   padding:12px 19px;
                   border:1px solid #ccc;
                   color:#333;
                   }
              }
              
          }
        }
        .show-message{
            background-color:#fff;
            line-height:80px;
            text-align: center;
            font-size:30px;
        }
      }
    }
  }
}
</style>


